<!DOCTYPE html>
<html lang="zh-cn">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">




<title>CSS Font | Miles`s</title>

<link rel="stylesheet" href="https://mada.gitee.io/notes//css/styles.css">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" 
integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/zenburn.min.css" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js" integrity="sha256-/BfiIkHlHoVihZdc6TFuj7MmJ0TWcWsMXkeDFwhi0zw=" crossorigin="anonymous"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script src="https://mada.gitee.io/notes//js/highlight.js"></script>






<div class="container">
    <nav class="navbar level">
      <div class="navbar-brand">
          <a class="nav-item" href="https://mada.gitee.io/notes/"><h1 class="title is-3">Miles`s</h1></a>
      </div>           
      <div class="navbar-menu has-text-centered is-active">
          <div class="navbar-end is-centered">
              
           </div>
      </div>
    </nav>
  </div>
<div class="container">
  <h2 class="subtitle is-6">June 21, 2016</h2>
  <h1 class="subtitle is-size-4-mobile is-size-3-desktop">CSS Font</h1>
  <div class="content">
    

<h2 id="font">Font</h2>

<p>继承性</p>

<h3 id="font-face">font-face</h3>

<pre><code>    @font-face {
        font-family: 'MyWebFont';
        src: url('webfont.eot'); /* IE9 Compat Modes */
        src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
             url('webfont.woff') format('woff'), /* Modern Browsers */
             url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
             url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
    }
</code></pre>

<h3 id="字体系列">字体系列</h3>

<h4 id="serif-衬线字体">Serif 衬线字体</h4>

<p>这些字体成比例，而且有上下短线。
成比例：字符根据其大小不同占据不同的款待。</p>

<h4 id="sans-serif-无衬线字体">Sans－serif 无衬线字体</h4>

<p>egs：Helvetica</p>

<p>成比例
没有上下短线</p>

<h4 id="monospace">Monospace</h4>

<p>不成比例：每个字符的宽度都完全相同。
不分上下短线</p>

<h4 id="cursive-手写体">Cursive 手写体</h4>

<p>模仿人的手写体</p>

<h4 id="fantasy-梦幻字体">Fantasy 梦幻字体</h4>

<p>无法用任何特征来定义。
无法很容易地将其划归到任何一种其他的字体系列当中。</p>

<h4 id="使用">使用</h4>

<pre><code>	font-family: sans-serif; // 通用字体系列 从所有无衬线字体中选择

    font-family: Heveltica; // 指定字体系列

    font-family: Heveltica， sans-serif; // 指定字体系列 如果不存在 使用后面的字体系列

    // 使用引号：字体名中有空格或者包括＃或$之类的符号，需要在申明中加引号。
    // 如果没有，可能会忽屁略该字体系列
    // 唯一必须要加引号的是与接受关键字匹配的字体名。 如'cursive'
    font-family: &quot;Times New Roman&quot;, &quot;cursive&quot;;
</code></pre>

<h4 id="字体加粗-font-weight-继承">字体加粗  <code>font-weight</code>  继承</h4>

<pre><code>	font-weight： normal（默认） | bold | bolder | lighter | 100...900
</code></pre>

<p>加粗如何起作用</p>

<p>关键字 100-900  9个级别
这些数字本身没有固定的加粗度，
只要后面的数字不会比前面的更细就都是允许的。</p>

<pre><code>400 === normal
500 === medium
700 === bold

&lt;=500 升级处理
&gt;=600 降级处理

bolder：从父元素中升级处理
lighter： 从父元素中降级处理
</code></pre>

<h4 id="字体大小-font-size-可继承">字体大小  font-size 可继承</h4>

<pre><code>	font-size: xx-small | x-small | small | medium(初始值) | large | x-large
    | xx-large | smaller | larger | &lt;length&gt; | &lt;percentage&gt; | inherit
</code></pre>

<p>属性与看到的实际字体大小之间的具体关系由字体的设计者来确定。</p>

<p>这种关系设置为字体本身中的一个em方框。
这个em框不一定指示字体中字符建立的任何边界。
相反，它指示如果没有额外的行间距设置时基线间的距离。</p>

<p>某种字体的字符可能比默认的基线间距距离要高。
出于这种原因，定义字体时可能要求所有字符都小于其em方框。</p>

<p>作用 是 为给定字体的em框提供一个大小，而不能保证实际显示的字符就是这种大小。</p>

<h5 id="绝对大小">绝对大小</h5>

<p>xx-small x-small 缩放因子 1.5 1.2</p>

<h5 id="相对大小">相对大小</h5>

<p>larger  smaller 缩放因子</p>

<h5 id="百分数和大小">百分数和大小</h5>

<p>百分数： 根据夫元素大小来计算。 浏览器可能取整也可能不取</p>

<p>等同 em</p>

<h5 id="字体大小与继承">字体大小与继承</h5>

<h5 id="使用长度单位">使用长度单位</h5>

<p>pt：
pc：
in：
cm：
mm：</p>

<p>其他： TODO</p>

<h5 id="风格">风格</h5>

<p>font-style: italic | oblique | normal | inherit</p>

<p>italic: 斜体</p>

<p>oblique： 倾斜</p>

<p>如果没有italic字体，但由oblique，则定义italic会使用oblique
相反 则不会</p>

<h5 id="字体变形">字体变形</h5>

<p>font-variant: small-caps | normal | inherit</p>

<p>small-caps: 小型大写字母 既不是小写 也不是普通的大写。不继承</p>

<h5 id="拉伸">拉伸</h5>

<p>font-stretch:</p>

<h5 id="font-size-adjust-only-firefox">font-size-adjust (only firefox)</h5>

<p>font-size-adjust: <number> | none(默认) | inherit</p>

<p>当所用字体非创作人员的首选时，仍然保证可以辨识。</p>

<p>font-size x-height 影响字体能辨识度。</p>

<p>aspect value： x-height / font-size</p>

  </div>
</div>
<div class="container has-text-centered">
    
</div>

<div class="container has-text-centered">
  
</div>
<section class="section">
  <div class="container has-text-centered">
    <p></p>
  </div>
</section>


